<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <div ng-app="essa" ng-controller="mainCtrl">
            <essa-button ng-click="handleClick()">Show Modal</essa-button>
            <essa-modal
                visible="{{isModalVisible}}"
                ok-text="提交"
                cancel-text="关闭"
                on-cancel="handleCancel()"
            >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </essa-modal>
        </div>
        <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            angular
                .module("essa", [])
                .controller("mainCtrl", function ($scope,  $interval) {
                    $scope.isModalVisible = false;
                    $scope.handleClick = function () {
                        $scope.isModalVisible = true;
                    };
                    $scope.handleCancel = function () {
                        $scope.isModalVisible = false;
                    };
                    // $interval(function() {
                    //     $scope.isModalVisible = !$scope.isModalVisible;
                    // }, 2000)
                });
        </script>
        <script src="../dist/Essa/Button/Button.js"></script>
        <script src="../dist/Essa/Modal/Modal.js"></script>
    </body>
</html>
